<script setup>

import { ref } from 'vue';
const list = ref([1, 2, 3, 4, 5])

const add = () => {
  list.value.push(Math.floor(Math.random() * 10) + 1);
}

const remove = () => {
  list.value.shift();
}
</script>

<template>
  <button @click="add">add</button>
  <button @click="remove">remove</button>
  <transition-group tag="div" class="list">
    <div v-for="item in list" class="item" :key="item">{{ item }}</div>
  </transition-group>
</template>

<style scoped>
.list {
  display: flex;
  width: 30px;
  flex-wrap: wrap;

  .item {
    width: 20px;
    margin: 5px;
    height: 20px;
    text-align: center;
  }
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>